<template>
  <el-select
    v-model="selectedValue"
    placeholder="请选择"
    @change="handleChange"
    clearable
  >
    <!-- 选项 -->
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />

    <!-- 自定义输入框内容 -->
    <template #prefix>
      <el-tag
        v-if="selectedLabel"
        closable
        @close="removeTag"
      >
        {{ selectedLabel }}
      </el-tag>
    </template>
  </el-select>
</template>

<script>
export default {
  data()
  {
    return {
      selectedValue: '', // 选中的值
      selectedLabel: '', // 选中的标签文本
      options: [
        { label: '1号柜-大号柜子-3元/小时', value: '1' },
        { label: '2号柜-中号柜子-2元/小时', value: '2' },
        { label: '3号柜-小号柜子-1元/小时', value: '3' }
      ]
    }
  },
  methods: {
    // 处理选择事件
    handleChange(value)
    {
      const selectedOption = this.options.find((item) => item.value === value)
      this.selectedLabel = selectedOption ? selectedOption.label : ''
    },
    // 移除标签
    removeTag()
    {
      this.selectedValue = ''
      this.selectedLabel = ''
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 100%; /* 设置下拉框宽度 */
}

/* 隐藏输入框的文本 */
.el-select :deep(.el-input__inner) {
  opacity: 0;
}

.el-tag {
  margin-right: 5px; /* 调整标签间距 */
}
</style>
